<script setup>
import router from "@/router/index.js";
import {getDocMyPageList} from "@/api/document/myDocument.js";

const {proxy} = getCurrentInstance()
const {docStatus} = proxy.useDict(["docStatus", false])
const documentList = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    status: '',
  }
})
const {queryParams} = toRefs(data)

onMounted(() => {
  getList()
})

const documentStatisticsList = ref([])
function getList() {
  loading.value = true
  getDocMyPageList().then(res => {
    loading.value = false
    documentList.value = res.list
    for (const item of docStatus.value) {
      let count = 0
      for (const document of res.list) {
        if (document.status === item.value) {
          count ++
        }
      }
      documentStatisticsList.value.push({ label: item.label, value: item.value, count: count })
    }
  })
}

function turnToDocument(docStatus) {
  router.push({ path: '/document/my', query: { docStatus: docStatus } })
}

</script>

<template>
  <el-card shadow="never">
    <el-row class="mb20">
      <el-col :span="12" style="text-align: left">
        <el-text style="font-size: 16px;" type="primary" link>我的公文（{{documentList.length}}）</el-text>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-space wrap>
          <el-badge v-for='item in documentStatisticsList' :key="item.value" :value="item.count" :max="99" class="mr10">
            <el-button plain @click="turnToDocument(item.value)">{{item.label}}</el-button>
          </el-badge>
        </el-space>
      </el-col>
    </el-row>

  </el-card>
</template>

<style scoped lang="scss">


</style>